<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            {{msg}}
        </div>
        <script type="text/javascript">

            var vm = new Vue({
                el: '#app',
                data: {
                    msg: "hi vue"
                },
                // 在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用
                beforeCreate: function () {
                    console.log('beforeCreate')
                },
                // 在实例创建完成后被立即调用。
                // 在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的计算，event/watcher事件回调。
                // 然而，挂载阶段还没开始，$el属性目前不可见。
                created: function () {
                    console.log('created')
                },
                // 在挂载开始之前被调用：相关的渲染函数首次被调用
                beforeMount: function () {
                    console.log('beforeMount')
                },
                // el被新创建的vm.$el替换，挂载完成
                mounted: function () {
                    console.log('mounted')
                },
                // 数据更新时调用
                beforeUpdate: function () {
                    console.log('beforeUpdate')
                },
                // 组件DOM已经更新，组件更新完毕
                updated: function () {
                    console.log('updated')
                },
                // 组件销毁之前
                beforeDestroy: function () {
                    console.log('beforeDestroy')
                },
                // 组件销毁之后
                destroyed: function () {
                    // `this` 指向 vm 实例
                    console.log('destroyed')
                },
            })
            setTimeout(function(){
                vm.msg = "change ...... "
            }, 3000)
        </script>
    </body>
</html>